<template>
  
      <section class='huzhao-dialog'>
        <ul>
          <li v-for='(k,i) in dataList' :key='i'>
            <div @click.stop = 'handleExpand(i)' class='titles' :class="handleLiColor(k.passportType,k.useStatus)">
              <div class = 'titles-left'>{{k.useStatus | handleUseStatus}}</div>
               <div class = 'titles-middle'>
                <h2 class='titles-middle-type'>{{k.passportType | handlePassportType }} <span>{{k.stockStatus | handleStockStatus}}</span></h2>
                <div class='titles-middle-time'>
                 
                  <span>签发日期&nbsp;&nbsp;{{k.issueTime | handleTime}}</span>
                  <span :class='handlTimeOut(k.realEffectTime)'>有效日期&nbsp;&nbsp;{{k.realEffectTime | handleTime}}</span>
                  <p>证件号&nbsp;&nbsp;{{k.passportId}}</p>
                </div>
              </div> 


              <div v-if='k.visaInfos.length' class = 'titles-right'>
                查看签证 <i :class='{rotate:visible[i]}'></i>
              </div>

              
              <div v-else style='cursor:not-allowed' class = 'titles-right'>
                暂无签证
              </div>
            </div>
            <transition name="fade">

                 
              <ul class='content' v-show='visible[i]'>

                <li v-for='(q,e) in k.visaInfos' :key='e'>
                  <h3 class="content-title">
                     <span>{{q.country}}</span>
                     <span>签注号: <i>{{q.visaId}}</i></span>
                  </h3>
                  
                  
                  <div class="content-detail">
                    <span>失效日期 </span>&nbsp;<span :class='handlTimeOut(q.outTime)'> {{q.outTime | handleTime}}</span><i :class='handlTimeOut(q.outTime)' v-if='handlTimeOut(q.outTime)=="grey"||handlTimeOut(q.outTime)=="red"'>({{handlTimeOut(q.outTime)=='grey'?'已过期':'即将过期'}})</i>
                  </div>
                  
                </li> 
              </ul>

            </transition>
          </li>
        </ul>
  
      </section>
       
</template>

<script>
import Vue from 'vue';

export default {
  data () {
    return {
      dataList: [],
      visible: []
    };
  },

  filters: {
    handleTime: function (value) {
      if (value.length >= 10) {
        value = value.substring(0, 10);
      }
      return value;
    },
    handleUseStatus (val) {
      switch (val) {
        case '0':
          return '有效';

          break;

        case '1':
          return '过期';

          break;

        case '2':
          return '新发';

          break;

        case '3':
          return '注销';

          break;

        case '4':
          return '丢失';

          break;
      }
    },

    handlePassportType (val) {
      switch (val) {
        case '1':
          return '因公护照';
          break;
        case '2':
          return '因公港澳证';
          break;
        case '3':
          return '赴台证';
          break;
        case '4':
          return '因私护照';
          break;
        case '5':
          return '因私港澳证';
          break;
      }
    },
    handleStockStatus (val) {
      switch (val) {
        case '0':
          return '在库';
          break;
        case '1':
          return '借出';
          break;

        case '2':
          return '返还';
          break;
      }
    }
  },

  mounted () {
    this.sendAjax();
  },

  methods: {
    handlTimeOut (time) {
      if (!time) return;

      if (time.length >= 10) {
        time = time.substring(0, 10);
      }

      const now = parseInt(new Date().getTime() / 1000);
      const date = parseInt(new Date(time).getTime() / 1000);
      const day = parseInt((date - now) / 3600 / 24);

      if (day <= 0) {
        return 'grey'
      } else if (day <= 90) {
        return 'red'
      }

    },

    handleLiColor (type, status) {
      if (status == 1 || status == 3 || status == 4) {
        return 'type4';
      }

      switch (type) {
        case '1':
          return 'type1';
          break;
        case '2':
          return 'type2';
          break;
        case '3':
          return 'type3';
          break;
      }
    },
    sendAjax () {
      this.Axios.Post(this.URL.getZsjPassportAndVisaInfo.url, {}).then(res => {
        this.dataList = res.data.datas;
        this.dataList.forEach((ele, i) => {
          if (ele.visaInfos.length) {
            this.visible.push(true);
          } else {
            this.visible.push(false);
          }
        });
      });
    },
    handleExpand (i) {
      this.visible.splice(i, 1, !this.visible[i]);
    }
  }
};
</script>

<style lang='less'>
.huzhao-dialog {
  min-height: 100vh;
  background-color: #fff;
  & > ul {
    background-color: #fff;

    & > li {
      background-color: #fff;
      padding: 12/50rem 10/50rem;

      .fade-enter-active,
      .fade-leave-active {
        transition: all 0.5s;
      }
      .fade-enter,
      .fade-leave-to {
        opacity: 0;
      }
      .titles {
        border-radius: 4/50rem;
        color: #fff;
        overflow: hidden;
        position: relative;

        & > div {
          float: left;
        }
        .titles-left {
          border-radius: 50%;
          position: absolute;
          top: 50%;
          left: 8/50rem;
          transform: translateY(-50%);
          height: 40/50rem;
          width: 40/50rem;
          line-height: 42/50rem;
          font-size: 12/50rem;
          text-align: center;
          background-color: rgba(0, 0, 0, 0.16);
          word-break: keep-all; /* 不换行 */
          white-space: nowrap;
        }
        .titles-middle {
          padding-left: 50/50rem;

          .titles-middle-type {
            padding: 12/50rem 0 12/50rem 10/50rem;
            font-size: 16/50rem;
            span {
              margin-left: 10/50rem;
              font-size: 13/50rem;
              display: inline-block;
              padding: 2/50rem 10/50rem;
              background-color: rgba(0, 0, 0, 0.16);
              border-radius: 12/50rem;
              font-weight: normal;
            }
          }

          .titles-middle-time {
            overflow: hidden;
            span {
              float: left;
              margin-left: 10/50rem;
            }
            span.red {
              color: #d14d4d;
            }
            span.grey {
              color: #d14d4d;
            }

            p {
              margin: 25/50rem 0 10/50rem 10/50rem;
            }
          }
        }

        .titles-right {
          cursor: pointer;
          position: absolute;
          bottom: 10/50rem;
          right: 8/50rem;
          width: 80rem/50;
          i {
            margin-left: 3/50rem;
            background: url(../../../static/imgs/down.png) no-repeat center /
              100% 100%;
            display: inline-block;
            width: 12/50rem;
            height: 12/50rem;
          }
          i.rotate {
            transform: rotate(180deg);
          }
        }
      }

      .titles.type1 {
        // background-color: #5eb3f9;
        background-color: #5eb3f9;
      }

      .titles.type2 {
        // background-color: #5eb3f9;
        background-color: #22bfc9;
      }

      .titles.type3 {
        // background-color: #5eb3f9;
        background-color: #a991f3;
      }

      .titles.type4 {
        // background-color: #5eb3f9;
        background-color: #b3b3b3;
      }

      .content {
        overflow: hidden;
        background-color: #f1f1f1;
        padding: 10/50rem;
        border-radius: 0 0 10/50rem 10/50rem;

        & > li {
          width: 100%;
          .content-title {
            background-color: #e1edf9;
            min-height: 48/50rem;
            line-height: 50/50rem;
            border-radius: 10/50rem 10/50rem 0 0;
            padding: 0 12/50rem;
            overflow: hidden;

            span:first-of-type {
              float: left;
              font-size: 18/50rem;
            }
            span:last-of-type {
              float: right;
              color: #6d8aa2;
              i {
                font-style: normal;
                font-size: 16/50rem;
                font-weight: normal;
              }
            }
          }

          .content-detail {
            background-color: #fff;
            width: 100%;
            border-radius: 0 0 10/50rem 10/50rem;
            padding: 20/50rem 0 20/50rem 12/50rem;
            span:first-of-type {
              color: #828282;
            }
            span:last-of-type {
              color: #090909;
              font-size: 16/50rem;
            }
            span.red {
              color: #d14d4d;
            }

            i {
              font-size: 16/50rem;
              font-style: normal;
              letter-spacing: 1/50rem;
            }

            i.grey {
              color: #b3b3b3;
            }

            i.red {
              color: #d14d4d;
            }
          }

          // .country {
          //   width: 90/50rem;
          //   font-size: 16/50rem;
          //   color: #333;
          //   font-weight: bold;
          //   margin-right: 40/50rem;
          //   text-align: right;
          //   word-break: keep-all; /* 不换行 */
          //   white-space: nowrap; /* 不换行 */
          //   overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
          //   text-overflow: ellipsis;
          // }

          .time {
            float: right;
            span {
              color: #666;
            }
            span:nth-of-type(2n) {
              margin-right: 30/50rem;
              font-size: 15/50rem;
              color: #333;
              font-weight: 550;
            }
          }
          // .number {
          //   float: left;
          //   margin-right: 34/50rem;
          // }
        }
      }
    }
  }
}
</style>
